<html lang="en-gb" dir="ltr" class="uk-touch">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio layout example - UIkit documentation</title>
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@include file="basic/basic_includes.jsp" %>
        <style type="text/css">
            .showPic{
                width: 256px;
                height: 224px;
            }
        </style>
    </head>

    <body class="uk-height-1-1">
    <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
    <div class="uk-grid" >
        <form class="uk-form">
            <h2>照片上传</h2>

            <fieldset data-uk-margin>
                <div class="col-sm-9" >
                    <input type="hidden" name="pictureName"  style="width: 372px;">
                    <input type="text" id="photoCover" class="form-control"  style="width: 372px;"  placeholder="点击选择上传照片"
                           onclick="$('input[id=photoFile]').click();" onkeydown="return false;">
                </div>


                <div class="form-group" style="display:none;"  >
                    <label for="preview" class="col-sm-3 control-label">图片预览</label>
                    <div class="col-sm-9">
                        <img id="imgPreview" alt="上传图片预览" src="" style="max-width: 196px;"/>
                    </div>
                </div>
            </fieldset>
            <br>

            <fieldset data-uk-margin>
                <div class="col-sm-9">
                    <input type="hidden" name="pictureName" style="width: 372px;" >
                    <input type="text" id="photoCover2" class="form-control" style="width: 372px;"  placeholder="点击选择上传照片"
                           onclick="$('input[id=photoFile2]').click();" onkeydown="return false;">
                </div>


                <div class="form-group" style="display:none;" >
                    <label for="preview" class="col-sm-3 control-label">图片预览</label>
                    <div class="col-sm-9">
                        <img id="imgPreview2" alt="上传图片预览" src="" style="max-width: 196px;"/>
                    </div>
                </div>
            </fieldset><br>

            <fieldset data-uk-margin>
                <div class="col-sm-9">
                    <input type="hidden" name="pictureName" style="width: 372px;" >
                    <input type="text" id="photoCover3" class="form-control" style="width: 372px;"  placeholder="点击选择上传照片"
                           onclick="$('input[id=photoFile3]').click();" onkeydown="return false;">
                </div>


                <div class="form-group" style="display:none;" >
                    <label for="preview" class="col-sm-3 control-label">图片预览</label>
                    <div class="col-sm-9">
                        <img id="imgPreview3" alt="上传图片预览" src="" style="max-width: 196px;"/>
                    </div>
                </div>
            </fieldset><br>

            <fieldset data-uk-margin>
                <legend>我的标签</legend>

                <label><input type="checkbox" value="杭州" id="checkbox1" onclick="addTags()" > 杭州</label>
                <label><input type="checkbox" value="山景" id="checkbox2" onclick="addTags()"> 山景</label>
                <label><input type="checkbox" value="水景" id="checkbox3" onclick="addTags()"> 水景</label>
                <label><input type="checkbox" value="朋友" id="checkbox4" onclick="addTags()"> 朋友</label>
            </fieldset><br>
            <input type="text" placeholder="标签预览" id="previewTags"  style="width: 372px;" ><br>



        </form>


    </div>


    </div>
    <br><button class="uk-button" onclick="uploadPic()" style="position: relative;left: 111px;top: -55px; " >上传照片</button><br>
        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">




                  

          
         
    </div>


            <!-- addRecords panel contents end -->
    <form class="form-horizontal" id="picUploadForm" action="<%=path %>/up/onePic.html" role="form" method="post" enctype="multipart/form-data" >
        <!-- 实际的file控件 -->
        <input id="photoFile" type="file" name="photoFile" style="display:none">
    </form>
    <form class="form-horizontal" id="picUploadForm2" action="<%=path %>/up/onePic.html" role="form" method="post" enctype="multipart/form-data" >
        <input id="photoFile2" type="file" name="photoFile" style="display:none">
    </form>
    <form class="form-horizontal" id="picUploadForm3" action="<%=path %>/up/onePic.html" role="form" method="post" enctype="multipart/form-data" >
        <input id="photoFile3" type="file" name="photoFile" style="display:none">
    </form>


    
</body>
<script>



    function uploadPic() {
        if(isNull($('#imgPreview').attr('src'))){alert("至少选择一张照片");}
        else {
            $.ajax({
                url:path+'/newPic.html',
                type:'post',
                dataType:'json',
                data:{

                    pic : $('#imgPreview').attr('src'),
                    pic2 : $('#imgPreview2').attr('src'),
                    pic3 : $('#imgPreview3').attr('src'),
                    tags : $('#previewTags').val()

                },
                success : function(rd) {
                    if(rd)
                        alert("添加成功");
                    window.location.href=path+"/index.html";
                }
            })


        }

    }

    $('input[id=photoFile]').change(function() {
        $('#photoCover').val($(this).val());
        $('#picUploadForm').ajaxSubmit({
            success: function (data) {
                if(typeof(data)!='object') data=JSON.parse(data);
                console.info(data.errorInfo);
                $('#addAuthForm').find('input[name=pictureName]').val(data.files);
                console.info(data.files);
                $('#imgPreview').attr('src','${pageContext.request.contextPath}/'+data.files);
                $('#imgPreview').parent().parent().show();
                //alert($('#addAuthForm').find('input[name=pictureName]').val());
            }
        });
    });

    $('input[id=photoFile2]').change(function() {
        $('#photoCover2').val($(this).val());
        $('#picUploadForm2').ajaxSubmit({
            success: function (data) {
                if(typeof(data)!='object') data=JSON.parse(data);
                $('#addAuthForm2').find('input[name=pictureName2]').val(data.files);
                $('#imgPreview2').attr('src','${pageContext.request.contextPath}/'+data.files);
                $('#imgPreview2').parent().parent().show();
            }
        });
    });
    $('input[id=photoFile3]').change(function() {
        $('#photoCover3').val($(this).val());
        $('#picUploadForm3').ajaxSubmit({
            success: function (data) {
                if(typeof(data)!='object') data=JSON.parse(data);
                $('#addAuthForm3').find('input[name=pictureName3]').val(data.files);
                $('#imgPreview3').attr('src','${pageContext.request.contextPath}/'+data.files);
                $('#imgPreview3').parent().parent().show();
            }
        });
    });

    function addTags(name) {
        $("#previewTags").val("");
        var hasChk1 = $('#checkbox1').is(':checked');
        var hasChk2 = $('#checkbox2').is(':checked');
        var hasChk3 = $('#checkbox3').is(':checked');
        var hasChk4 = $('#checkbox4').is(':checked');
        if(hasChk1)   previewAddTag($('#checkbox1').val());
        if(hasChk2)   previewAddTag($('#checkbox2').val());
        if(hasChk3)   previewAddTag($('#checkbox3').val());
        if(hasChk4)   previewAddTag($('#checkbox4').val());

    }
    function previewAddTag(name) {
        var previewTags = $('#previewTags').val();
        if (isNull(previewTags))
            return $("#previewTags").val(name);
        else
            return $("#previewTags").val(previewTags+":"+name);
    }



</script></html>